<template>
	<div class="register">
		<input type="text"  placeholder="username" v-model="name">
		<input type="text"  placeholder="password" v-model="password">
		<span @click="goRegister">注册</span>
		<div class="qrcodeWrap" v-show="qrcode">
			<div id="qrcode"></div>
			<p>请扫描上方二维码登录</p>
		</div>
	</div>
</template>

<script>
	export default {

		data(){

			return {
				qrcode: false,
				name: '',
				password: ''
			}

		},
		
		methods: {
			goRegister(){
				if( (/[x00-xff]{9,}/.test(this.$data.name)) && (/[x00-xff]{9,}/.test(this.$data.password))){
					this.qrcode = true;
					let qrcode = new QRCode(document.getElementById("qrcode"), {
				        width : 195,
				        height : 195
				    });
				    qrcode.makeCode(`https://woniuchiyumi.top/userInfo/wx_login?info=${this.$data.name}_${this.$data.password}`);
				}
			}
		}
	}

</script>


<style lang="scss" scoped>
	@function rem($px){
	    @return ($px/75)+rem;
	}
	.register{
		width:80%;
		height:rem(600);
		padding-top: rem(200);
		border:1px solid #000;
		border-radius:rem(20);
		margin:rem(200) auto;
		background-color: rgba(0,0,0,1);
		text-align: center;
		input{
			width: 80%;
			height:rem(70);
			border:1px solid #ddd;
			padding-left: rem(20);
			border-radius: rem(10);
			margin:rem(50) 0;
		}
		
		span{
			display: inline-block;
			width:40%;
			line-height: rem(70);
			text-align: center;
			background-color: #000;
			border:1px solid #ddd;
			color:#fff;
			border-radius: rem(10);
			font-size: rem(32);
		}
	}
	.qrcodeWrap{
		position: fixed;
		width: 100%;
		height:100%;
		left:0;
		top:0;
		background-color: rgba(0,0,0,1);
		p{
			color:#fff;
			line-height: rem(90);
			letter-spacing: rem(4);
		}	
	}
	#qrcode{
	    width: rem(390);
	    height: rem(390);
	    vertical-align:middle;
	    position: relative;
	    margin: 50% auto 8%;
    }
</style>